<template>
  <div>
    <h1>{{ num }}</h1>
    <div v-for="item in list" :key="item.objectId">
      {{ item.name }}
    </div>
    <h1>mapGetters获取到的getters数据</h1>
    <div v-for="(item, index) in fGlist" :key="index">
      商品名称 {{ item.name }} 商品价格 {{ item.price }} 商品库存 {{ item.m }}
    </div>
    <h1 @click="handlePlus">通过mapMutations触发数字+</h1>
    <h1 @click="handleMinus">通过mapMutations触发数字-</h1>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import { myMapMutations } from "../../utils/myVuex";
export default {
  computed: {
    // list() {
    //   return this.$store.state.banner.tableData;
    // },
    // num(){
    //   return this.$store.state.count.num
    // },
    // 等价于
    ...mapState({
      list: (state) => state.banner.tableData,
      num: (state) => state.count.num,
    }),
    ...mapGetters({
      fGlist: "goods/fGlist",
    }),
  },
  methods: {
    // handlePlus:()=>{
    //   this.$store.commit("count/increment");
    // },
    // handleMinus:()=>{
    //   this.$store.commit("count/decrement");
    // },
    // 等价于
    ...myMapMutations({
      handlePlus: "count/increment",
      handleMinus: "count/decrement",
    }),
    ...mapActions({
      initBanner: "banner/initBannerAct",
    }),
  },
  created() {
    this.initBanner(); //触发mapActions提供的方法
  },
};
</script>

<style lang="scss" scoped></style>
